<template>
	<view class="home_container">
		<!-- 轮播图 -->
		<view class="banner">
			<!-- <u-swiper :list="bannerList"></u-swiper> -->
			<img src="@/static/home/banner.jpg" alt="" />
		</view>
		<!-- 基本功能 -->
		<view class="commonTitle"><text></text>基本功能</view>
		<view class="baseFunctionalBox">
			<view @click="goBaseInfo" class="measurement">
				<view class="title">数据测量</view>
				<view class="icon icon1"></view>
			</view>
			<view @click="goDataMeasurement" class="report">
				<view class="title">查看报告</view>
				<view class="icon icon2"></view>
			</view>
		</view>
		<!-- 关于我们 -->
		<view class="commonTitle"><text></text>关于我们</view>
		<view class="aboutUsBox">
			<view @click="goCourse" class="development">
				<view class="title">研发历程</view>
				<view class="icon">
					<img src="@/static/home/developmentICON.png">
				</view>
			</view>
			<view @click="goTeamInfo" class="team">
				<view class="title">团队介绍</view>
				<view class="icon teamIcon">
					<img src="@/static/home/teamICON.png">
				</view>
			</view>
		</view>
		<view class="aboutUsBox">
			<view @click="showroom" class="showroom">
				<view class="title">展厅位置</view>
				<view class="icon showroomIcon">
					<img src="@/static/home/showroomICON.png">
				</view>
			</view>
			<view @click="goContactUs" class="contact">
				<view class="title">联系我们</view>
				<view class="icon contactIcon">
					<img src="@/static/home/contactICON.png">
				</view>
			</view>
		</view>
		<!-- 公益开放 免费使用 -->
		<view class="PublicWelfareSlogans">公益开放 免费使用</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import { getBannerList } from '@/api/home.js'
export default {
	data() {
		return {
			title: "Hello",
			bannerList: [],
		};
	},
	onLoad() {},
	onShow() {
		this.getBannerList();
	},
	computed: {
		...mapGetters(['token'])
	},
	methods: {
		async getBannerList() {
			let res = await getBannerList()
			this.bannerList = [];
			if (res.code == 1 && res.data.length) {
				res.data.forEach(item => {
					item.imageUrl = 'http://39.105.161.113:8018' + item.imageUrl
					this.bannerList.push(item.imageUrl)
				})
			}
		},
		goBaseInfo() {
			this.checkLogin();
			uni.navigateTo({
				url: "/subPages/baseInfo/baseInfo",
			});
		},
		goDataMeasurement() {
			this.checkLogin();
			uni.navigateTo({
				url: "/subPages/dataMeasurement/dataMeasurement",
			});
		},
		goCourse() {
			this.checkLogin();
			uni.navigateTo({
				url: "/subPages/course/course",
			});
		},
		goTeamInfo() {
			this.checkLogin();
			uni.navigateTo({
				url: "/subPages/teamInfo/teamInfo"
			})
		},
		showroom() {
			this.checkLogin();
			uni.navigateTo({
				url: "/subPages/showroom/showroom"
			})
		},
		goContactUs() {
			this.checkLogin();
			uni.navigateTo({
				url: "/subPages/contactUs/contactUs",
			});
		},
		checkLogin() {
			if (!this.token) {
				uni.navigateTo({
					url: "/pages/login/login",
				});
				return false;
			}
		},
	},
};
</script>

<style lang="scss">
.home_container {
	position: relative;
	padding: 30rpx 20rpx 0 20rpx;
	
	.banner {
		height: 380rpx;
		
		img {
			display: block;
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}
	}

	.commonTitle {
		padding: 30rpx 0;
		font-weight: 700;

		text {
			position: relative;
			top: 5.5rpx;
			display: inline-block;
			width: 10rpx;
			height: 32rpx;
			background-color: #016ab7;
			border-radius: 4rpx;
			margin-right: 10rpx;
		}
	}

	.baseFunctionalBox {
		display: flex;

		.measurement,.report {
			position: relative;
			flex: 1;
			height: 200rpx;
			border-radius: 20rpx;
			margin-right: 30rpx;

			&:last-child {
				margin-right: 0;
			}

			.title {
				position: relative;
				top: 20rpx;
				left: 20rpx;
				color: #fff;
			}

			.icon {
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
				width: 130rpx;
				height: 130rpx;
			}

			.icon1 {
				background-image: url("~@/static/home/measurementICON.png");
				background-size: 100% 100%;
			}

			.icon2 {
				width: 110rpx;
				background-image: url("~@/static/home/reportICON.png");
				background-size: 100% 100%;
			}
		}

		.measurement {
			background-image: url("~@/static/home/measurement.png");
			background-size: 100% 100%;
		}

		.report {
			background-image: url("~@/static/home/report.png");
			background-size: 100% 100%;
		}
	}

	.aboutUsBox {
		display: flex;

		.development,.team,.showroom,.contact {
			flex: 1;
			display: flex;
			height: 150rpx;
			border-radius: 20rpx;
			margin-right: 30rpx;

			&:last-child {
				margin-right: 0;
			}

			.title,.icon {
				flex: 1;
			}

			.title {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.icon {
				display: flex;
				justify-content: center;
				align-items: center;

				img {
					width: 52%;
					height: 74%;
				}
			}

			.teamIcon {
				img {
					width: 70%;
					height: 70%;
				}
			}

			.showroomIcon {
				img {
					width: 60%;
					height: 70%;
				}
			}

			.contactIcon {
				img {
					width: 68%;
					height: 70%;
				}
			}
		}

		.development,.team {
			margin-bottom: 30rpx;
		}

		.development {
			background-image: url("~@/static/home/development.png");
			background-size: 100% 100%;
		}

		.team {
			background-image: url("~@/static/home/team.png");
			background-size: 100% 100%;
		}

		.showroom {
			background-image: url("~@/static/home/showroom.png");
			background-size: 100% 100%;
		}

		.contact {
			background-image: url("~@/static/home/contact.png");
			background-size: 100% 100%;
		}
	}

	.PublicWelfareSlogans {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);	
		bottom: -20%;
		height: 80rpx;
		text-align: center;
		color: #016ab7;
		font-weight: 700;
		line-height: 80rpx;
	}
}
</style>
